<template>
	<div>
		<mu-list-item class="my-list-item" avatar>
			<vs-checkbox color="danger"/>
			<mu-list-item-action>
				<div class="my-bg-img">
					<img class="" src="https://forum.alexs.fun/categories/bed.png" alt="床">
				</div>
			</mu-list-item-action>

			<mu-list-item-content>
				<mu-list-item-title>欧洲新风尚皇室贵族台柜</mu-list-item-title>
				<mu-list-item-sub-title>
					<div class="my-sub-row row-1" style="color: rgba(0, 0, 0, .87)">浅白色，奶白色</div>
					<div class="my-sub-row row-2">
						<span class="my-price-tag">￥4399</span>
						<div class="my-pagination">
							<mu-pagination :page-size="1" raised circle :total="99" :current.sync="current"/>
						</div>
					</div>
				</mu-list-item-sub-title>
			</mu-list-item-content>
		</mu-list-item>
		<mu-divider/>
	</div>
</template>

<script>
export default {
	name: "MyProductItem",
	data() {
		return {
			current: 1
		}
	}
}
</script>

<style scoped>
	/******* Item 价格，品名，总价****/
	.my-bg-img {
		background-color: #F6F6F6;
		border-radius: 15px;
		height: 80px;
		width: 80px;
		margin: 10px 10px 10px 2px;
		overflow: hidden;
	}
	.my-bg-img > img{
		width: 100%;
		height: 100%;
	}
	.my-list-item {
		height: 100px;
		background-color: white;
	}
	.mu-list-item-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.my-sub-row {
		flex: 1;
	}
	.my-sub-row .row-1 {
		order: 1;
	}
	.my-sub-row .row-2 {
		order: 2;
	}
	.row-2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 2px 5px 0;
	}
	.my-price-tag, .my-pagination {
		display: inline-block;
	}
	.my-price-tag {
		font-size: 18px;
		font-weight: 600;
		color: #FF5300;
	}
	.con-vs-checkbox {
		margin: 0;
		display: none;
	}
</style>